<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
	<link href="css/mycss.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>
</head>
<body>
	<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
		<div class="mui-scroll">
			<!-- 主体 -->
			<div class="mui-content">
				<!-- 关联账户金额模块 -->
				<div id="account">
					<button id="account_num">关联账户</button><input type="text" name="money" value="" placeholder="记录金额" id="detail_money"/>
				</div>
				<!-- 交易类型模块 -->
				<div class="mui-collapse-content tra_type">
					<div class="mui-input-row mui-radio mui-left a" style="background: url(images/jie.png) no-repeat 100px 5px; background-size: 22px 22px;">
						<label>借出</label>
						<input type="radio" name="checkbox1" id="" value="借出" class="rds"/>
					</div>
					<div class="mui-input-row mui-radio mui-left a" style="background: url(images/food.png) no-repeat 100px 4px; background-size: 25px 25px;">
						<label>餐饮</label>
						<input type="radio" name="checkbox1" id="" value="餐饮" checked="checked" class="rds"/>
					</div>
					<div class="mui-input-row mui-radio mui-left b" style="background: url(images/phone.png) no-repeat 100px 4px; background-size: 25px 25px;">
						<label>通讯</label>
						<input type="radio" name="checkbox1" id="" value="通讯" class="rds"/>
					</div>
					<div class="mui-input-row mui-radio mui-left a" style="background: url(images/game.png) no-repeat 100px 4px; background-size: 25px 25px;">
						<label>娱乐</label>
						<input type="radio" name="checkbox1" id="" value="娱乐" class="rds"/>
					</div>
					<div class="mui-input-row mui-radio mui-left a" style="background: url(images/traffic.png) no-repeat 100px 4px; background-size: 25px 25px;">
						<label>交通</label>
						<input type="radio" name="checkbox1" id="" value="交通" class="rds"/>
					</div>
					<div class="mui-input-row mui-radio mui-left b" style="background: url(images/shop.png) no-repeat 100px 4px; background-size: 25px 25px;">
						<label>购物</label>
						<input type="radio" name="checkbox1" id="" value="购物" class="rds"/>
					</div>
					<div class="mui-input-row mui-radio mui-left b" style="background: url(images/income.png) no-repeat 100px 4px; background-size: 25px 25px;">
						<label>收入</label>
						<input type="radio" name="checkbox1" id="" value="收入" class="rds"/>
					</div>
					<div class="mui-input-row mui-radio mui-left b" style="background: url(images/other.png) no-repeat 100px 4px; background-size: 25px 25px;">
						<label>杂项</label>
						<input type="radio" name="checkbox1" id="" value="杂项" class="rds"/>
					</div>
					
				</div>
				<!-- 时间模块 -->
				<div class="time_date_div">
					<div class="time_date mydate" id="time1" onclick="showDate()"></div>
					<div class="time_date mytime" id="time2" onclick="showTime()"></div>
				</div>
				<!-- 备注模块 -->
				<div><textarea id="detail_info_area" placeholder="小主您可在这儿备注哦~" rows="3" cols="20" class="text_info"></textarea></div>
				<!-- 提交模块 -->
				<div><button id="sure" onclick="postData();">记一笔</button></div>
			</div>
		</div>
	</div>
	
	<script type="text/javascript">
		
		
		
		mui.init({
			pullRefresh : {
				container:"#pullrefresh",
				down: {
					height:50,
					style:'circle',
					// auto:true,
					callback:myRefresh
				}
			}
		});
		// 下拉刷新
		function myRefresh(){
			setTimeout(function(){
				//需要刷新的页面的id
				var pageId = "new_info.html";
				//根据页面id获取页面
				var page = plus.webview.getWebviewById(pageId);
				//刷新页面
				page.reload();
			},500)
		}
				
		mui.plusReady(function () {
			var times = new Date();
		    document.getElementById('time1').innerText = times.getFullYear() + "-"+ (times.getMonth()+1) + "-" +times.getDate();
			document.getElementById('time2').innerText = times.getHours()+":"+times.getMinutes() + ":" + times.getSeconds();
		})
		
		// 重构back函数
		var old_back = mui.back;
		mui.back = function() {
		    // 获取目标口窗口对象
		    var target = plus.webview.getWebviewById('mine_page.html');
		    // 执行相应的事件
		    mui.fire(target, 'customEvent', {});
		    // 执行关闭
		    old_back();
		};
		
		function showMenu(){
			mui('#menu').popover('toggle');
		};
		
		
		// 加事件函数
		function getRadioRes(className){
			var rdsObj = document.getElementsByClassName(className);
			var checkVal = null;
			for(i=0; i< rdsObj.length; i++){
				if(rdsObj[i].checked){
					checkVal = rdsObj[i].value;
				}
			}
			return checkVal
		};
		
		function showDate(){
			var nDate = new Date();
			// nDate.setFullYear(2016, 9, 6);
			var minDate = new Date();
			minDate.setFullYear(2019,0,1);
			var maxDate = new Date();
			maxDate.setFullYear(2023,11,31);
			
			plus.nativeUI.pickDate(
				function(e){
					var d = e.date;
					var mydata = d.getFullYear() + "-" + (d.getMonth()+1) + "-" + d.getDate();
					// mui.toast(mydata);
					document.getElementById('time1').innerText = mydata;
				},
				function(e){
					mui.toast('您没有选择日期');
				},
				{
					title:'请选择日期',
					date:nDate,
					minDate:minDate,
					maxDate:maxDate
				}
			);
		};
		
		function showTime(){
			var nTime = new Date();
			plus.nativeUI.pickTime(
				function(e){
					var d = e.date;
					// mui.toast("你选择的时间是:" + d.getHours()+":"+d.getMinutes());
					document.getElementById('time2').innerText = d.getHours()+":"+d.getMinutes()+":" + d.getSeconds();
				},
				function(e){
					mui.toast('您没有选择时间');
				},
				{
					title:'请选择时间',
					is24Hour:true,
					time: nTime,
				});
		};
		
		

		function getRadioRes(className){
			var rdsObj = document.getElementsByClassName(className);
			var checkVal = null;
			for(i=0; i< rdsObj.length; i++){
				if(rdsObj[i].checked){
					checkVal = rdsObj[i].value;
				}
			}
			return checkVal
		};
		var account_id=null
		// 封装的ajax请求函数
		function postData(){
			document.getElementById('sure').setAttribute('disabled', 'false')
			
			time1 = setTimeout(function(){
				// 页面重刷
				var pageId = "new_info.html";
				//根据页面id获取页面
				var page = plus.webview.getWebviewById(pageId);
				//刷新页面
				page.reload();
				// 清除禁用
				clearInterval(time2)
				document.getElementById('sure').removeAttribute('disabled');
				document.getElementById('sure').innerHTML = '记一笔';
			}, 6000)
			var time_num = 5
			var time2 = setInterval(function(){
				document.getElementById('sure').innerHTML = time_num + '秒后可使用'
				time_num = time_num -1
			},1000)
			
			if(account_id == null){
				mui.toast('小主请选卡');
				clearTimeout(time1)
				clearInterval(time2)
				document.getElementById('sure').removeAttribute('disabled');
				document.getElementById('sure').innerHTML = '记一笔';
				return
			}
			var res = getRadioRes('rds');
			// mui.toast(res);
			// 消费类型
			var detail_type = res;
			// 消费金额
			
			var detail_num = document.getElementById('detail_money').value;
			// mui.toast(detail_num);
			if(detail_num.length == 0){
				mui.toast('小主忘记填写金额了哦~');
				clearTimeout(time1)
				clearInterval(time2)
				document.getElementById('sure').removeAttribute('disabled');
				document.getElementById('sure').innerHTML = '记一笔';
				return
			};
			if (detail_num == "" || isNaN(detail_num)) {
				mui.toast("金额部分我只学会了数字哦");
				clearTimeout(time1)
				clearInterval(time2)
				document.getElementById('sure').removeAttribute('disabled');
				document.getElementById('sure').innerHTML = '记一笔';
				return
			};
			
			var account_name = document.getElementById('account_num').innerHTML;
			// 备注
			var detail_info = document.getElementById('detail_info_area').value

			var num = Math.floor(Math.random() * 10 + 1);
			// 组装时间
			var time = document.getElementById('time1').innerText + 'T' + document.getElementById('time2').innerText + '.11';
		    mui.ajax(localStorage.getItem('request_url')+'cost/detail/?token='+ localStorage.getItem('uid'),{  
		        data:"detail_type="+ detail_type + "&detail_num=" + detail_num + "&detail_info=" + detail_info + "&account=" + account_id + "&token=" + localStorage.getItem('uid') + "&detail_time=" + time,
		        dataType: 'json',
		        type:'post',  
		        contentType:"application/x-www-form-urlencoded; charset=utf-8",  
		        timeout:60000,  
		        success:function show(e){
					var data = account_name + ' ' + detail_type+ ' ' +detail_num+' 元'
					mui.alert(data, '✔成功记录', function() {
					});
				},  
		        error:function(xhr,type,errorThrown){
		            var data = JSON.parse(xhr.responseText)
		            if(data.code==4002){
						mui.toast('小主登录失效了哦，请重新登录')
					}else{
						mui.toast(data.msg)
					}
				}
			});
		}
		
		document.getElementById('account_num').addEventListener('tap', function() {
			if (mui.os.plus) {
				var a = JSON.parse(localStorage.getItem('account_list'));
				if(a==null){
					mui.toast('登录失效,和服务器失去联系啦')
				}
				plus.nativeUI.actionSheet({ 
					title: "选择小主的卡片",           //这里就是这个弹窗的title
					cancel: "取消",                     //取消按钮
					buttons: a 
				},function(b) { /*actionSheet 按钮点击事件*/ 　
					var data_id = a[b.index-1].title.split(' ')[10]; //这里面就是触发的事件，比如想做一个选择性别的弹窗，就可以通过a[b.index].title来获取当前点击了男还是女，注意，此处的b.index是从1开始的。要从0开始的话，要记得减1.
					var data_name = a[b.index-1].title.split(' ')[0];
					document.getElementById('account_num').innerText = data_name;
					account_id = JSON.parse(localStorage.getItem('account_id'))[data_id]
				}) 
			} 
		}, false);
	</script>
</body>
</html>